Tutorial: JW Player Embedded

See original tutorial  HERE.

JW Player Embedded

Question: How to embed JW Player in any Flash file?

Here’s all the necessary resources and more:

Basic embed Flash in html: http://www.longtailvideo.com/support/tutorials/Embedding-Flash
Embed JW Player in Flex: http://developer.longtailvideo.com/trac/wiki/FlexEmbedding
JW Player API: http://developer.longtailvideo.com/trac/wiki/FlashAPI
JW Player flashvars: http://developer.longtailvideo.com/trac/wiki/FlashVars
load external SWF in Flash stage: link
LONG forum posts: http://www.longtailvideo.com/support/forum/Setup-Problems/11830/Embeding-JW-player-4-0-in-a-flash-website-AS3-
more… http://www.longtailvideo.com/jw/?search=embed+flash

Thanks to some members in the longtail forum, I frankensteined a working presentation without being very familiar with AS3. See example here:
sample portfolio

JW specific imports, or you can import all JW stuff:

import com.jeroenwijering.events.*;
import com.jeroenwijering.player.*;
import com.jeroenwijering.plugins.*;
import com.jeroenwijering.utils.Configger;

Optional, store a URL string of the player with parameters, like size, autoplay etc.

To keep things simple, put all files (yes html, player files, host SWF, all videos) in the same directory. My version did organize elements into a nice folder hierarchy. Though since referencing parent folders (eg ../parent) doesn’t work perhaps due security or silly syntax, my videos folder is in the player folder. I dislike this hierarchy in terms of strict relations, but at least folders separate element types cleanly.

Link in the SWF JW player by the procedure in the above Adobe page, using a Loader object. Take care relative directories in the URL is relative to the html page caller, not the host SWF caller.

Note relationship: html page -> your custom SWF -> embedded (loaded) JW Player SWF

Then some good event handlers as the bulk of you customization:

function loaderHandler(e:Event) //SWF player loaded
function playerReady(e:Event=null) //initialized. Now use the API to send/receive
function resizePlayer(), buttons etc //the interactive UI bulk

Then much of the UI connections just take time. You can see I retained the standard JW skin. You can replace it, use all your own controls etc. All the controls still work, except fullscreen, which I need to somehow intercept and relay to a correct parent "window".

 

Posted on 02/28/2009, in code, web/mobile. Bookmark the permalink. 7 Comments.

  1. Just passing by.Btw, you website have great content!

  2. i am getting the following error:

    Property view not found on _player_mx_managers_SystemManager and there is no default value.

    private function loaderFinished(e:Event) : void {
    playerObject = e.target.content as Object;

    if(playerObject.view == null) {

    playerObject.addEventListener(PlayerEvent.READY, this.playerReady);

    } else {
    playerReady();

    }
    }

    • hey genxsol for your interest, pardon i don’t have a habbit of reading comments. I haven’t coded AS3 lately. But just a guess you can do as the Adobe page below, using Event contants like COMPLETE, DISPLAYING etc. I don’t think playerObject has a “view” property. Try using properties of MovieClip or Event.

      Hope this link can guide you:
      http://help.adobe.com/en_US/AS3LCR/Flash_10.0/flash/display/MovieClip.html#eventSummary

      quote ”
      // This is done after the swf is loaded.
      function finished_loading (e:Event) {
      var externalMovie = MovieClip(loader.content); // cast ‘DisplayObject’ to ‘MovieClip’
      stage.addChild(externalMovie); // add your swf directly to the stage
      externalMovie.gotoAndPlay(“start”); // Now you can use all MovieClip methods!
      }

      // Tell the loader to call ‘finished_loading’ after the swf is loaded.
      import flash.events.Event;
      loader.contentLoaderInfo.addEventListener(flash.events.Event.COMPLETE, finished_loading);
      ” endquote

  3. when i try to run on local it works but upload on server it occur error: “video found or access denied:filename.flv”

  4. I love your blog. I’ve added it to my favorite bookmarks and subscribed in a reader.

    Looking forward to reading more posts by you.

    I have some good web tutorials on http://www.webtutorials.me/tutorials.php

    Thanks.

  1. Pingback: javascript shadowbox question - OXYLUS Flash Board

Leave a comment